<template>
	<view>
		<uni-nav-bar :border="true"  @clickLeft="toBack" color="#555" leftIcon="arrowleft" title="会员" :fixed="true" :status-bar="true"></uni-nav-bar>
		<!-- 会员卡 -->
		<view class="vip-card">
			<image src="../../static/vip/vip-bg.png" mode="widthFix"></image>
			<view class="card-no">NO.{{ vipInfo.vipNo }}</view>
			<view class="card-user">
				<view class="user-nick">{{ vipInfo.nickName }}</view>
				<image :src="vipInfo.userHeard" mode="aspectFill"></image>
			</view>
			<view class="vip-expire">
				<view class="vip-expire-info">
					尊贵会员
					<view class="vip-expire-data">{{ vipInfo.endTime }}到期</view>
				</view>

				<view v-if="vipInfo.renew" class="renew">立即续费</view>
			</view>
		</view>

		<!-- VIP购买 -->
		<view class="vip-menu">
			<view class="vip-menu-title">会员套餐</view>
			<view class="">
				<scroll-view :show-scrollbar="false" class="vip-menu-list" scroll-x="true">
					<block v-for="(menu, index) in vipMenuList" :key="'vip' + index">
						<view class="vip-menu-li" @tap="selectVip(menu)">
							<view class="vip-menu-item" :class="[active.id === menu.id ? 'active' : '']">
								<view class="time">{{ menu.memberTime === 0.5 ? '半' : menu.memberTime }}个月</view>
								<view class="price">{{ menu.memberFee }}狐狸币</view>
							</view>
						</view>
					</block>
				</scroll-view>
			</view>
			<view class="vip-play-btn" @tap="buyVip">支付{{ active.memberFee }}狐狸币开通</view>
		</view>

		<view class="vip-trait">
			<view class="vip-trait-title">会员特权</view>
			<view class="vip-trait-list">
				<block v-for="(trait, index) in traitList" :key="'trait' + index">
					<view class="vip-trait-item">
						<image :src="trait.img" mode="aspectFill"></image>
						<view class="vip-trait-info">
							<view class="title">{{ trait.title }}</view>
							<view class="desc">{{ trait.desc }}</view>
						</view>
					</view>
				</block>
			</view>
		</view>

		<view class="vip-power">
			<view class="vip-power-title">VIP特权介绍</view>
			<view class="vip-power-table-title">
				<view>非会员</view>
				<view>会员</view>
			</view>

			<!-- 聊天 -->
			<view class="vip-power-t">— 免费解锁私聊&社交账号&相册 —</view>
			<view class="vip-power-max">每月最高解锁500次</view>

			<view class="vip-power-item">
				<view class="not-vip">
					<view>私聊机会/社交账号</view>
					<text>
						相册分别
						<text>付费解锁</text>
					</text>
				</view>

				<view class="vip">
					<image src="../../static/vip/power.png" mode="widthFix"></image>
					<view class="one">每天免费10次</view>
				</view>
			</view>

			<!-- VIP标识 -->
			<view class="vip-power-t">— VIP标识&专属列表 —</view>
			<view class="vip-power-item">
				<view class="not-vip"><view>平平无奇</view></view>

				<view class="vip">
					<image src="../../static/vip/power.png" mode="widthFix"></image>
					<view class="tow">尊享VIP身份及专属列表，交友成功率80%</view>
				</view>
			</view>

			<!-- 阅后即焚 -->
			<view class="vip-power-t">— 阅后即焚更持久 —</view>
			<view class="vip-power-item">
				<view class="not-vip"><view>2秒即毁</view></view>

				<view class="vip">
					<image src="../../static/vip/power.png" mode="widthFix"></image>
					<view class="one">6s照片焚毁时间</view>
				</view>
			</view>
		</view>

		<uni-popup ref="coinPop" type="dialog"><uni-popup-dialog mode="base" title="金币不足" content="金币不足,请充值!" @confirm="coinPopDo"></uni-popup-dialog></uni-popup>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
import constant from '../../utils/Constant.js';
import showToast from '../../utils/ToastUtils.js';
export default {
	components: {
		uniPopup,
		uniPopupDialog
	},
	data() {
		return {
			vipInfo: {},
			active: {},
			vipMenuList: [],
			traitList: [
				{ img: '../../static/vip/trait.png', title: '看的更省', desc: '相关的vip特权描述' },
				{ img: '../../static/vip/trait.png', title: '玩的更爽', desc: '相关的vip特权描述' },
				{ img: '../../static/vip/trait.png', title: '看的更久', desc: '相关的vip特权描述' },
				{ img: '../../static/vip/trait.png', title: '玩的更省', desc: '相关的vip特权描述' },
				{ img: '../../static/vip/trait.png', title: '看的更多', desc: '相关的vip特权描述' },
				{ img: '../../static/vip/trait.png', title: '玩的更嗨', desc: '相关的vip特权描述' }
			]
		};
	},
	methods: {
		toBack(){
			uni.navigateBack({
				delta:1
			});
		},
		selectVip(menu) {
			this.active = menu;
		},
		buyVip() {
			uni.request({
				url: constant.baseHttpUri + constant.pathUri.vip,
				header: constant.authHead(),
				method: 'POST',
				data: {
					vipType: this.active.id
				},
				success: res => {
					if (res.data.code === constant.dataCode.OK) {
						plus.push.createMessage('购买VIP会员成功', '', {
							cover: true,
							delay: 2,
							sound: 'system',
							title: '购买VIP成功',
							subtitle: '购买VIP购买成功',
							icon: '_www/static/logo_tmp.png'
						});
						showToast("会员购买成功");
						this.loadVipInfo();
					} else if (res.data.code === constant.dataCode.COIN_ERROR) {
						this.$refs.coinPop.open();
					} else {
						showToast(res.data.msg);
					}
				},
				fail: r => {
					console.log(r);
				}
			});
		},
		coinPopDo() {
			this.$refs.coinPop.close();
			uni.navigateTo({
				url: '../wallet/wallet'
			});
		},
		loadVipType() {
			uni.request({
				url: constant.baseHttpUri + constant.pathUri.vipType,
				header: constant.authHead(),
				method: 'GET',
				success: res => {
					if (res.data.code === constant.dataCode.OK) {
						this.vipMenuList = res.data.data;
					} else {
						showToast(res.data.msg);
					}
				},
				fail: r => {
					console.log(r);
				}
			});
		},
		loadVipInfo() {
			uni.request({
				url: constant.baseHttpUri + constant.pathUri.vipInfo,
				header: constant.authHead(),
				method: 'GET',
				success: res => {
					if (res.data.code === constant.dataCode.OK) {
						this.vipInfo = res.data.data;
						if(res.data.data.vipType===0){
							this.active = this.vipMenuList[0];
						}else{
							this.active = this.vipMenuList.find(type=>res.data.data.vipType===type.id);
						}
					} else {
						showToast(res.data.msg);
					}
				},
				fail: r => {
					console.log(r);
				}
			});
		}
	},
	onLoad() {
		this.loadVipType();
		this.loadVipInfo();
	}
};
</script>

<style lang="less" scoped>
.vip-card {
	margin-top: 20rpx;
	padding: 0 40rpx;
	position: relative;
	image {
		width: 100%;
	}
	.card-no {
		position: absolute;
		top: 75rpx;
		left: 80rpx;
		font-weight: 500;
		color: #2b1c00;
		font-size: 28rpx;
	}
	.card-user {
		position: absolute;
		top: 15rpx;
		right: 70rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		.user-nick {
			font-weight: 500;
			color: #2b1c00;
			margin-right: 10rpx;
			font-size: 28rpx;
		}
		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
	}
	.vip-expire {
		position: absolute;
		bottom: 30rpx;
		left: 80rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 80%;
		.vip-expire-info {
			display: flex;
			flex-direction: row;
			align-items: center;
			font-weight: 500;
			color: #2b1c00;
			font-size: 32rpx;
			.vip-expire-data {
				font-size: 22rpx;
				color: #917d57;
				margin-left: 10rpx;
			}
		}
		.renew {
			background: #2b1c00;
			color: #ffffff;
			font-size: 24rpx;
			padding: 0 8rpx;
			border-radius: 8rpx;
		}
	}
}

.vip-menu {
	margin-top: 20rpx;
	padding: 0 40rpx;

	.vip-menu-title {
		font-weight: 500;
		color: #333333;
		font-size: 28rpx;
		margin: 20rpx 0;
	}

	.vip-menu-list {
		white-space: nowrap;
		width: 100%;
		.vip-menu-li {
			display: inline-block;

			.vip-menu-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
				background: #f8f7fc;
				margin-right: 10rpx;
				.time {
					color: #999999;
					font-size: 28rpx;
				}
				.price {
					font-weight: 500;
					color: #e9c383;
					font-size: 28rpx;
				}
			}
			.active {
				width: 165rpx;
				height: 165rpx;
				background: #fff9ee;
				border: 1px solid #e9c383;
			}
		}
	}

	.vip-play-btn {
		margin: 20rpx 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 80rpx;
		font-weight: 500;
		color: #ffffff;
		background: linear-gradient(360deg, #e5be7b 0%, #f9dba9 100%);
		font-size: 32rpx;
		border-radius: 40rpx;
	}
}

.vip-trait {
	border-top: 1rpx solid transparent;

	.vip-trait-title {
		padding: 0 40rpx;
		font-weight: 500;
		color: #333333;
		font-size: 28rpx;
		margin: 20rpx 0;
	}
	.vip-trait-list {
		padding-left: 35rpx;
		padding-right: 40rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;

		.vip-trait-item {
			border-bottom: 1rpx solid transparent;
			margin: 20rpx 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 50%;
			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}

			.vip-trait-info {
				margin-left: 10rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				.title {
					font-weight: 500;
					color: #333333;
					font-size: 32rpx;
				}
				.desc {
					color: #999999;
					font-size: 24rpx;
				}
			}
		}
	}
}
.vip-power {
	.vip-power-title {
		padding: 0 40rpx;
		font-weight: 500;
		color: #333333;
		font-size: 28rpx;
		margin: 20rpx 0;
		border-bottom: 1rpx solid transparent;
	}
	.vip-power-table-title {
		margin: 20rpx 0;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		font-weight: 500;
		color: #333333;
		font-size: 32rpx;
		border-bottom: 1rpx solid transparent;
		& > view:last-child {
			color: #ddae5c;
		}
	}
	.vip-power-t,
	.vip-power-max {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		border-bottom: 1rpx solid transparent;
	}
	.vip-power-t {
		margin-top: 20rpx;
		color: #333333;
		font-size: 28rpx;
	}
	.vip-power-max {
		color: #999999;
		font-size: 24rpx;
	}

	.vip-power-item {
		padding: 0 40rpx;
		margin: 20rpx 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid transparent;
		.not-vip {
			margin-right: 10rpx;
			width: 50%;
			height: 160rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background: #f8f7fc;
			border-radius: 20rpx;
			color: #333333;
			font-size: 28rpx;
			& > text {
				font-size: 28rpx;
				line-height: 28rpx;
				text {
					color: #ddae5c;
				}
			}
		}
		.vip {
			width: 50%;
			position: relative;
			image {
				width: 100%;
				vertical-align: middle;
			}
			.one {
				width: 236rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				color: #333333;
				font-size: 28rpx;
			}

			.tow {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				color: #333333;
				width: 236rpx;
				font-size: 24rpx;
				line-height: 30rpx;
			}
		}
	}
}

/deep/::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}
</style>
